<template>
	<view class="app">
		<view style="display: flex;justify-content: space-around; align-items: baseline; border-bottom: 1px solid #EAEAEA;margin-top: 2%; ">
			<view @click="onClickLeft">
				<uni-icon type="back" size="30"></uni-icon>
			</view>
			<input class="uni-input" style="background-color: #EAEAEA;border-radius: 5px;width: 70%;margin-bottom: 3%;height: 35px;"
			 focus placeholder="《总裁》" />
			<view style="color: #A50A0D;">搜索</view>
		</view>

		<view class="card">
			<view class="title">
				<view>搜索热词</view>
				<view class="cardLeft">
					查看更多
					<uni-icon type="forward" size="20"></uni-icon>
				</view>
			</view>
			<view class="content">
				<uni-tag v-for="t in tagList" :key="t.id" style="margin: 2% 2%;" :text="t.text" @click="bindClick" :circle="true"></uni-tag>
			</view>
		</view>

		<view class="card">
			<view class="title">
				<view>热门推荐</view>
				<view class="cardLeft">
					换一批
					<uni-icon type="reload" size="20"></uni-icon>
				</view>
			</view>
			<view class="content">
				<view style="display: flex;align-items: center;font-size: 16px;">
					<image style="width: 20px;height: 25px;" src="../../static/bookcity.png"></image>
					<view style="padding-left: 1%;">我是大反派</view>
				</view>
			</view>
		</view>

		<view class="card">
			<view class="title">
				<view>搜索历史</view>
				<view class="cardLeft">
					删除历史
					<uni-icon type="trash" size="20"></uni-icon>
				</view>
			</view>
			<view class="content">
				<view class="cardLeft">
					<image style="width: 20px;height: 20px;" src="../../static/time.png"></image>
					<view style="padding-left: 1%;">财富自由</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		uniNavBar,
		uniIcon,
		uniTag
	} from "@dcloudio/uni-ui"
	export default {
		data() {
			return {
				tagList: [{
						id: 1,
						text: '购是国防科技'
					},
					{
						id: 2,
						text: '购房客户是国防科技135'
					},
					{
						id: 3,
						text: '购房客户技'
					},
					{
						id: 4,
						text: '技'
					},
					{
						id: 5,
						text: '购科技'
					},
				]
			}
		},
		components: {
			uniNavBar,
			uniIcon,
			uniTag
		},
		methods: {
			onClickLeft() {
				this.$router.go(-1); //返回上一层
			}
		}
	}
</script>

<style>
	.app {
		color: #5D5D5D;
	}

	.card {
		height: 200px;
		/* border: 1px solid; */
		margin: 10px 10px;
		border-bottom: 1px solid #DCDCDC;
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-bottom: 5%;
	}

	.cardLeft {
		font-size: 13px;
		display: flex;
		align-items: center;
	}
</style>
